<template>
  <a-layout-header class="layout-header-container">
    <a-col :span="4">
      <NuxtLink to="/">
        <img src="/assets/logo.png" alt="logo">
      </NuxtLink>
    </a-col>
    <a-col :span="16">
      <div class="header-main-container">
        <div class="main-tab-container">
          <NuxtLink to="/" class="active">
            <i-mdi-compass-outline />
            <small>发现</small>
          </NuxtLink>
          <NuxtLink to="/">
            <i-ph-book-open-text />
            <small>关注</small>
          </NuxtLink>
          <NuxtLink to="/">
            <i-mdi-crown />
            <small>会员</small>
          </NuxtLink>
          <NuxtLink to="/">
            <i-mdi-file-code-outline />
            <small>IT技术</small>
          </NuxtLink>
          <NuxtLink to="/">
            <i-mdi-bell-ring-outline />
            <small>消息</small>
          </NuxtLink>
        </div>
        <div class="main-opear-container">
          <div class="opear-search-container">
            <a-input :bordered="false" placeholder="搜索">
              <template #suffix>
                <a-tooltip title="Extra information">
                  <i-ep-search />
                </a-tooltip>
              </template>
            </a-input>
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="4">
      <div class="header-userinfo-container">
        <template v-if="!userInfo">
          <a-button @click="() => { }" type="text">登录</a-button>
          <a-button @click="() => { }" shape="round" ghost type="primary">注册</a-button>
        </template>
        <template v-else>
          <a-dropdown>
            <div class="avatar">
              <a-avatar :size="40">
                <template #icon>
                  <a-image :preview="false" :src="userInfo ? userInfo.avatar : '/assets/default-avatar.png'"
                    alt="avatar" :fallback="viewUrl" />
                </template>
              </a-avatar>
              <i-ant-design-caret-down-filled />
            </div>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <NuxtLink>
                    <i-ant-design-user-outlined /> 我的主页
                  </NuxtLink>
                </a-menu-item>
                <a-menu-item>
                  <NuxtLink>
                    <i-ep-collection-tag /> 收藏文章
                  </NuxtLink>
                </a-menu-item>
                <a-menu-item>
                  <NuxtLink to="/" class="select-user">
                    <i-ep-setting /> 设置
                  </NuxtLink>
                </a-menu-item>
                <a-menu-item @click="() => { }">
                  <NuxtLink>
                    <i-ant-design-logout-outlined /> 退出
                  </NuxtLink>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </div>
    </a-col>
  </a-layout-header>
</template>

<script setup>

import { useErrorImage, useUserInfo } from '@/composables/state';

const { $message } = useNuxtApp();

// 预加载错误图片
const viewUrl = useErrorImage();
// 用户信息
const userInfo = useUserInfo();
</script>


<style lang="less" scoped>
.layout-header-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #ffffff;

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    font-size: 18px;
    color: #333333;

    svg {
      margin-right: 10px;
    }
  }

  .active {
    color: #ea6f5a !important;
  }

  .header-main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .main-tab-container {
      display: flex;
      align-items: center;
    }

    .main-opear-container {

      .opear-search-container {
        width: 250px;
        height: 35px;
        display: flex;
        align-items: center;
        border-radius: 30px;
        background-color: #EEEEEE;
      }
    }
  }

  .header-userinfo-container {
    display: flex;
    align-items: center;
    justify-content: center;

    .avatar {
      display: flex;
      align-items: center;
      cursor: pointer;

      svg {
        margin-left: 10px;
      }
    }
  }
}
</style>